<template>
	<view class="category">
		<!-- 搜索 -->
		<searchLink />
		<view class="cate">
			<!-- // 一级标题 -->
			<view class="left">
				<view class="item " @click="changeIndex(index)" :class="{active:currectIndex === index}" v-for="(item, index) in catList"
				 :key='index'>
					{{item.cat_name}}
				</view>
			</view>
			<!-- 二级三级标题 -->
			<view class="right">
				<!-- 二级标题 -->
				<image class="imgTop" src="../../static/banner_2.jpg" mode=""></image>
				<!-- 三级标题 -->
				<view class="goods">
					<block v-for="(item,index) in otherCateLict" :key='index'>
						<view class="title">
							<text>/</text>{{item.cat_name}}<text>/</text>
						</view>
						<view class="items">
							<view class="item" v-for="(subItem,subIndex) in item.children" :key='subIndex'>
								<image :src="subItem.cat_icon" mode=""></image>
								<text>{{subItem.cat_name}}</text>
							</view>
						</view>
					</block>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchLink from '../../components/SearchLink.vue'
	export default {
		data() {
			return {
				currectIndex: 0,
				catList: [], // 所有分类
				// 二级三级分类会跟着一级分类的改变而改变
				// 单独定义一个数据用来存放改变后的二级三级数据
				otherCateLict: []
			}
		},
		components: {
			searchLink
		},
		watch:{
			currectIndex(){
				// 只要一级分类改变，就需要重新获取otherCateLictde的数据
				// 二三级数据
				this.otherCateLict = this.catList[this.currectIndex].children
			}
		},
		methods: {
			// 切换当前点击的一级分类为选中我分类
			changeIndex(index) {
				this.currectIndex = index
				// 改变一级分类的时候同时获取二级三级分类的数据
				this.otherCateLict = this.catList[this.currectIndex].children
			}
		},
		// 发送网络请求
		async onLoad() {
			// 楼层-分类
			const res = await this.$axios({
				url: '/categories'
			})
			// console.log(res)
			this.catList = res.data.message
			
		}
	}
</script>

<style lang="less">
	// 一般情况下设置容器的宽高通过width & height
	// 其实还有另一种方法设置宽高
	.category {
		.cate {
			display: flex;
			position: fixed;
			top: 100rpx;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #ddd;

			.left {
				width: 200rpx;
				overflow: auto;

				// 隐藏下拉
				&::-webkit-scrollbar {
					display: none;
				}

				.item {
					font-weight: 700;
					font-size: 20rpx;

					line-height: 100rpx;
					text-align: center;
					background-color: #f4f4f4;

					&.active {
						position: relative;
						color: #eb4450;
						background-color: #fff;

						&::before {
							content: '';
							width: 8rpx;
							height: 60rpx;
							background-color: #eb4450;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}

			.right {
				flex: 1;
				line-height: 60rpx;
				overflow: auto;
				padding: 20rpx 16rpx;
				background-color: #fff;

				// 隐藏下拉
				&::-webkit-scrollbar {
					display: none;
				}

				// 二级标题
				.imgTop {
					width: 100%;
					height: 180rpx;
				}

				.goods {
					.title {
						text-align: center;
						line-height: 110rpx;

						text {
							padding: 0 33rpx;
							color: #d9d9d9;
						}
					}

					.items {
						display: flex;
						flex-wrap: wrap;

						.item {
							margin-bottom: 65rpx;
							text-align: center;
							width: 33.33%;

							image {
								width: 120rpx;
								height: 120rpx;
							}

							text {
								display: block;
								font-size: 20rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
